<template>
  <div class="walkbox">
    <div class="walk-top">
      <h5>健走</h5>
      <span class="icon iconfont icon-dingwei" @click="toWalkmap"></span>
      <span class="icon iconfont icon-settings" @click="toWalkset"></span>
      <div class="jindu">
        <div class="cricle">
          <progress-bar type="circle" ref="circle" class="progress" :options="optiones"></progress-bar>
          <div class="min">
            <p class="num" >4500</p>
            <p>步</p>
          </div>
        </div>
        <div class="tian">目标10000</div>
      </div>
      <div class="benzhou">
        <div class="time">
          <span>daka</span>
          <p>198</p>
        </div>
        <div class="paiming">
          <span>公里</span>
          <p>3.6</p>
        </div>
      </div>
      <div class="stop" @click="stopStart">
        <span v-show="flag" @click="handleStop">暂停</span>
        <span v-show="!flag" @click="handleStart">开始</span>
      </div>
    </div>
    <div class="walk-bottom">
      <h5>周好友健走排名</h5>
      <ul>
        <li v-for="(item,index) in paiming" :key="index">
          <span class="num">{{index+1}}</span>
          <div class="photo">
            <img :src="item.img" alt />
          </div>
          <div class="name">{{item.name}}</div>
          <div class="step">{{item.step}}</div>
        </li>
      </ul>
      <div class="kong"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      paiming: [],
      flag: true,
      optiones: {
        color: "#333",
        strokeWidth: 3,
        trailColor: "#333",
        trailWidth: 3,
        alignToBottom: true,
        autoStyleContainer: true,
        style: {
          // Text color.
          // Default: same as stroke color (options.color)
          color: "#333",
          position: "absolute",
          left: "0%",
          top: "0%",
          padding: 0,
          margin: 0,
          // You can specify styles which will be browser prefixed
          transform: {
            prefix: true,
            value: "translate(0%, 0%)"
          }
        },
        duration: 5000
      },
      num: "0"
    };
  },
  mounted() {
    this.$refs.circle.animate(0.5, {
      step: function(state, circle, attachment) {
        // console.log(111,state,circle);
        circle.path.setAttribute("stroke", "rgb(254, 217, 6)");
      }
    });
    this.api.GetPaiming().then(res => {
      // console.log(res.data.Paiming);
      this.paiming = res.data.Paiming;
    });
  },
  methods: {
    toWalkset() {
      this.$router.push("/walkset");
    },
    toWalkmap() {
      this.$router.push("/walkmap");
    },
    stopStart() {
      this.flag = !this.flag;
     
    },
    handleStop() {
      this.$refs.circle.stop();
    },
    handleStart() {
      this.$refs.circle.animate(0.9, {
        step: function(state, circle, attachment) {
          // console.log(111,state,circle);
          circle.path.setAttribute("stroke", "rgb(254, 217, 6)");
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.walkbox {
  height: 100%;
  background: rgb(239, 239, 239);
  .walk-top {
    font-size: 0.5rem;
    height: 6rem;
    background: #fff;
    overflow: hidden;
    position: relative;
    h5 {
      margin-left: 0.2rem;
      margin-top: 0.2rem;
      font-weight: 400;
    }
    .icon-dingwei {
      float: right;
      font-size: 0.4rem;
      margin-top: -0.5rem;
      margin-right: 1.3rem;
    }
    .icon-settings {
      float: right;
      font-size: 0.4rem;
      margin-top: -0.5rem;
      margin-right: 0.5rem;
    }
    .jindu {
      position: relative;
      .cricle {
        font-size: 0.4rem;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 100%;
        position: absolute;
        right: 2.5rem;
        text-align: center;
          .progress{
        transform:rotate(-140deg)
      }
        .min {
          position: relative;
          top: -2rem;
          margin-top: 0.3rem;
          margin-top: 0.3rem;
          .num {
            font-size: 0.6rem;
          }
        }
      }
      .tian {
        font-size: 0.3rem;
        text-align: center;
        line-height: 0.4rem;
        width: 1.7rem;
        height: 0.5rem;
        background: #fff;
        position: absolute;
        top: 2.1rem;
        left: 2.9rem;
      }
    }
    .benzhou {
      margin-top: 2.7rem;
      font-size: 0.28rem;
      line-height: 0.5rem;
      font-weight: 500;
      .time {
        text-align: right;
        width: 40%;
        height: 1rem;
        float: left;
        p {
          margin-right: 0.05rem;
        }
      }
      .paiming {
        text-align: left;
        width: 40%;
        height: 1rem;
        float: right;
        p {
          margin-left: 0.05rem;
        }
      }
    }
    .stop {
      width: 4rem;
      height: 0.8rem;
      border-radius: 50px;
      text-align: center;
      font-size: 0.5rem;
      background: rgb(254, 217, 6);
      position: absolute;
      bottom: 0.3rem;
      left: 1.8rem;
    }
  }
  .walk-bottom {
    font-size: 0.5rem;
    width: 100%;
    margin-top: 0.3rem;
    background: #fff;
    overflow: hidden;
    h5 {
      margin-left: 0.2rem;
      margin-top: 0.2rem;
      font-weight: 400;
    }
    .kong {
      height: 1.2rem;
    }
    ul {
      li {
        .num {
          float: left;
          font-size: 0.5rem;
          width: 0.7rem;
          text-align: center;
        }
        .photo {
          width: 0.8rem;
          height: 0.8rem;
          border-radius: 100%;
          float: left;
          margin-left: 0.3rem;
          overflow: hidden;
        }
        .name {
          float: left;
          margin-left: 0.4rem;
          font-size: 0.35rem;
          line-height: 0.8rem;
        }
        .step {
          float: right;
          font-size: 0.35rem;
          line-height: 0.8rem;
        }
      }
    }
    li {
      width: 95%;
      height: 0.5rem;
      margin: 0.2rem auto;
      margin-bottom: 0.5rem;
      img {
        width: 100%;
      }
    }
  }
}
</style>